<template>
  <div>
    <div class="search">
      <el-form class="search-form" ref="searchForm">
        <el-form-item label="人员搜索:" label-width="82px">
          <el-input v-model="query.userName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="角色搜索:" label-width="82px">
          <el-select v-model="value" placeholder="请选择" clearable>
            <el-option
              v-for="item in role"
              :key="item.id"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
          <el-button type="primary" icon="el-icon-search" @click="searchList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="result">
      <el-table style="width: 100%" :data="workList">
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column label="人员名称" prop="userName"> </el-table-column>
        <el-table-column label="角色" prop="roleName"> </el-table-column>
        <el-table-column label="联系电话" prop="mobile"> </el-table-column>
        <el-table-column label="完成工单(本月)" prop="workCount">
        </el-table-column>
        <el-table-column label="进行中工单" prop="progressTotal">
        </el-table-column>
        <el-table-column label="拒绝工单(本月)" prop="cancelCount">
        </el-table-column>
        <el-table-column label="操作" prop="userId">
          <template #default="{ row: { userId } }">
            <el-button @click="viewInfo(userId)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="slot,prev,next"
          background
          :page-size="10"
          :total="total"
          prev-text="上一页"
          next-text="下一页"
          @current-change="changeCurrent"
        >
          <slot>
            <span class="el-pagination__total">
              共{{ total }}条记录&nbsp;&nbsp;第&nbsp;{{ query.pageIndex }}/{{
                totalPage
              }}&nbsp;页
            </span>
          </slot>
        </el-pagination>
      </div>
    </div>
    <el-dialog title="人员详情" :visible.sync="dialogVisible" width="45%">
      <div>
        <el-row class="user-info">
          <el-col :span="9"
            ><div>人员名称：{{ info.userName }}</div></el-col
          >
          <el-col :span="7"
            ><div>角色：{{ info.roleName }}</div></el-col
          >
          <el-col :span="8"
            ><div>联系电话：{{ info.mobile }}</div></el-col
          >
          <el-col :span="24"
            ><div>负责区域：{{ info.regionName }}</div></el-col
          >
        </el-row>
        <el-row class="user-work">
          <el-col :span="5"><div>&nbsp;</div></el-col>
          <el-col :span="5"><div>总工单数</div></el-col>
          <el-col :span="5"><div>拒绝工单</div></el-col>
          <el-col :span="5"><div>完成工单</div></el-col>
          <el-col :span="5"><div>进行中工单</div></el-col>
        </el-row>
        <el-row class="user-work">
          <el-col :span="5"><div>本周</div></el-col>
          <el-col :span="5"
            ><div>{{ weekWork.total }}</div></el-col
          >
          <el-col :span="5"
            ><div>{{ weekWork.cancelCount }}</div></el-col
          >
          <el-col :span="5"
            ><div>{{ weekWork.workCount }}</div></el-col
          >
          <el-col :span="5"
            ><div>{{ weekWork.progressTotal }}</div></el-col
          >
        </el-row>
        <el-row class="user-work">
          <el-col :span="5"><div>本月</div></el-col>
          <el-col :span="5"
            ><div>{{ monthWork.total }}</div></el-col
          >
          <el-col :span="5"
            ><div>{{ monthWork.cancelCount }}</div></el-col
          >
          <el-col :span="5"
            ><div>{{ monthWork.workCount }}</div></el-col
          >
          <el-col :span="5"
            ><div>{{ monthWork.progressTotal }}</div></el-col
          >
        </el-row>
        <el-row class="user-work">
          <el-col :span="5"><div>本年</div></el-col>
          <el-col :span="5"
            ><div>{{ yearWork.total }}</div></el-col
          >
          <el-col :span="5"
            ><div>{{ yearWork.cancelCount }}</div></el-col
          >
          <el-col :span="5"
            ><div>{{ yearWork.workCount }}</div></el-col
          >
          <el-col :span="5"
            ><div>{{ yearWork.progressTotal }}</div></el-col
          >
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWorkList, getStatus } from '@/api/work'
import { peopleInfo } from '@/api/people-admin'
import moment from 'moment'
export default {
  name: 'work-page',
  components: {},
  props: {},
  data() {
    return {
      status: true,
      workList: [],
      total: 0,
      // 查询参数
      value: '',
      query: {
        pageIndex: 1,
        pageSize: 10,
        userName: '',
        isRepair: null
      },
      role: [
        { id: 1, label: '运营员' },
        { id: 2, label: '维修员' }
      ],
      dialogVisible: false,
      info: {},
      weekWork: {},
      monthWork: {},
      yearWork: {},
      moment: {
        userId: null,
        start: '',
        end: ''
      }
    }
  },
  computed: {
    totalPage() {
      const num = this.total / 10
      return Math.floor(num) + 1
    }
  },
  watch: {},
  methods: {
    async worklist() {
      const res = await getWorkList(this.query)
      this.workList = res.currentPageRecords
      this.total = res.totalCount - 0
    },
    // 当前页数据
    changeCurrent(index) {
      this.query.pageIndex = index
      this.worklist()
    },
    // 查询人员列表
    async searchList() {
      try {
        if (this.value === '维修员') this.query.isRepair = true
        else if (this.value === '运营员') this.query.isRepair = false
        else this.query.isRepair = null
        await this.worklist()
      } catch (error) {
        console.log(error)
      }
    },
    async viewInfo(id) {
      const res = await peopleInfo(id)
      this.info = res
      this.moment.userId = id
      this.dialogVisible = true
      this.getMoment()
    },
    async getMoment() {
      this.moment.end = moment().format('YYYY-MM-DD 00:59:59')
      // one week
      this.moment.start = moment()
        .subtract(7, 'days')
        .format('YYYY-MM-DD 00:00:00')
      const res = await getStatus(this.moment)
      this.weekWork = res
      // one month
      this.moment.start = moment()
        .subtract(1, 'months')
        .format('YYYY-MM-DD 00:00:00')
      const res1 = await getStatus(this.moment)
      this.monthWork = res1
      // one year
      this.moment.start = moment()
        .subtract(1, 'years')
        .format('YYYY-MM-DD 00:00:00')
      const res2 = await getStatus(this.moment)
      this.yearWork = res2
    }
  },
  created() {
    this.worklist()
  }
}
</script>

<style scoped lang="scss">
.search-form {
  display: flex;
}
.el-input {
  width: 200px;
}
.el-button {
  margin-left: 10px;
}
.pagination {
  padding: 32px 16px;

  .el-pagination {
    display: flex;
    ::v-deep .el-pagination__total {
      flex: 1;
    }
    ::v-deep .btn-prev {
      width: 70px;
      height: 32px;
      background: #d5ddf8;
      &:disabled {
        background: #edf0f9;
      }
    }

    ::v-deep .btn-next {
      width: 70px;
      height: 32px;
      background: #d5ddf8;
    }
  }
}
.avatar-uploader {
  ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 84px;
  height: 84px;
  line-height: 84px;
  text-align: center;
}
.avatar {
  width: 84px;
  height: 84px;
  display: block;
}
.el-dialog__body {
  font-size: 14px;
  padding: 20px 20px 30px;
  color: #666;
  .user-info {
    height: 86px;
    padding: 19px 19px 0;
    background: #f3f6fb;
  }
  .user-work {
    border-top: 1px solid #d8dde3;
    border-left: 1px solid #d8dde3;
    &:nth-child(2) {
      margin-top: 26px;
      background: #f7f8fd;
    }
    .el-col-5 {
      width: 20%;
      line-height: 40px;
      border-right: 1px solid #d8dde3;
      text-align: center;
    }
  }
}
</style>
